<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>15_Drag_H5</title>
	<base target="blank">
	<style>
		#konwledege{
			position: fixed;
			right: 2%;
			top:2%;
			text-decoration:underline;
			color:inherit;
			outline: none;
			color: orange;
			font-size: 12px;
		}
		#toTop{
			position: fixed;
			right: 2%;
			bottom: 2%;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			border-radius: 100%;
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-size: 12px;
			text-align: center;
			color: red;
			z-index: 9999;
		}
		*{margin:0;padding: 0;}
		body{
			font-family: 'Microsoft yahei', Verdana, '仿宋',Arial, Helvetica, sans-serif;
			font-size: 18px;
			max-width: 1000px;
			margin: auto;
			position: relative;
		}
		a{text-decoration:none;color:inherit;outline: none;}
		img{border:none;vertical-align: middle;outline:none;}
		li{list-style:none;}
		
		section{
			position: relative;
			margin:50px auto;
		}
		section>h2{
			margin-bottom: 25px;
			text-align: center;
		}
		/*------------------------------拼图游戏-----------------------------------*/
		.puzzle{
			position: relative;
			width:900px;
			height: 400px;
		}
		.puzzle > ul{
			height: 100%;
		}
		.puzzle > ul > li{
			position: relative;
			float: left;
			width: 300px;
			height: 200px;
			box-shadow:inset 1px 1px 5px #0ff;
			background-color: rgba(0,0,0,.8);
		}
		.puzzle > ul > li > img{
			width: 100%;
			height: 100%;
		}
		.puzzle > ul > li.box > div{
			position: absolute;
			height: 100%;
			width: 100%;
			text-align:center;
			line-height: 200px;
			color:#fff;
			font-size:26px;
			background-color: rgba(0,0,0,0);
			z-index: 1;
		}
		.puzzle > ul > li >nav{
			position: relative;
			height: 100%;
			background-color: rgba(0,0,0,.2);
		}
		
		.puzzle > ul > li >nav > p{
			position: absolute;
			height: 100%;
			width: 100%;
			color: #fff;
			text-align:center;
			letter-spacing: 5px;
			line-height: 200px;
			font-size:30px;
			text-shadow:  1px 1px 10px rgba(0,0,0,.6);
		}
		.puzzle > ul > li >nav > div{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.on1{
			background:url('http://www.iyi8.com/uploadfile/2014/1218/20141218105452144.jpg') no-repeat 0/200% 200%;
			background-position-x: 0%;
    		background-position-y: 0%;
		}
		.on2{
			background:url('http://www.iyi8.com/uploadfile/2014/1218/20141218105452144.jpg') no-repeat 0/200% 200%;
			background-position-x: 100%;
    		background-position-y: 0%;
		}
		.on3{
			background:url('http://www.iyi8.com/uploadfile/2014/1218/20141218105452144.jpg') no-repeat 0/200% 200%;
			background-position-x: 0%;
    		background-position-y: 100%;
		}
		.on4{
			background:url('http://www.iyi8.com/uploadfile/2014/1218/20141218105452144.jpg') no-repeat 0/200% 200%;
		    background-position-x: 100%;
			background-position-y: 100%;
		}
		.puzzle #btn{
			position: absolute;
			left: 0;
			right: 0;
			bottom: -30%;
			margin:auto;
			width: 200px;
			height: 40px;
			line-height: 40px;
			color: #fff;
			background-color:rgba(0,0,0,.5);
			text-align: center;
			border-radius:15px;
			cursor:pointer;
			z-index: 99;
			letter-spacing:5px;
		}
		/*------------------------------拖拽排序-----------------------------------*/
		.sort-drag{
			margin:200px auto 0;
			width: 800px;
		}
		.sort-drag > .wrap > ul{
			position: relative;
			background-color: rgba(0,0,0,0.5);
			cursor:pointer;
		}
		.sort-drag > .wrap > ul > li{
			height: 80px;
			display: flex;
			justify-content:space-between;
			box-shadow: 1px 1px 2px #000;
		}
		.sort-drag > .wrap > ul > li > p{
			width: 30%;
			height: 100%;
			color:#fff;
			line-height: 80px;
			text-align: center;
		}
		.sort-drag > .wrap > ul > li > p:nth-child(1){
			text-align: left;
			text-indent: 1em;
		}
		.sort-drag > img{
			position: absolute;
			top:-10000%;
		}
		/*------------------------------回收站----------------------------------*/
		.collection{
			position: relative;
			margin:100px auto;
			width: 1000px;
			height: 600px;
			background: url('http://img.netbian.com/file/2017/0720/e698b2913191feda33be05774893d9cb.jpg') no-repeat center/cover;
		}
		.collection > h2{
			position: relative;
			top:-45px;
		}
		.collection > .wrap{
			position: absolute;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			box-shadow: 1px 1px 10px rgba(0,0,0,.5);
		}
		.collection > .wrap > div{
			position: absolute;
			width: 106px;
			height: 145px;
			background: url(case/1.png) no-repeat 19.6% 44%;
			transform:scale(0.8);
		}
		.collection > .wrap > div.on{
			background-position: 79% 44%;
		}
		.collection > .wrap > img{
			position: absolute;
			transform: scale(.8);
			z-index: 9999;
		}
		/*------------------------------拖拽上传---------------------------------*/
		.uploading{
			margin:0px auto 100px;
			width: 1000px;
		}
		.uploading > .wrap{
			
		}
		.uploading > .wrap > .up{
			height: 200px;
			background-color: #ccc;
			line-height:200px;
			font-size: 20px;
			color:#aaa;
			text-align:center;
		}
		i{margin:0 5px;font-style:normal;color:red;}
		.uploading > .wrap > .info{

			display: flex;
			justify-content:space-between;
			align-content:center;
			height: 80px;
		}
		.uploading > .wrap > .info > span{
			text-indent: 1em;
			font-size: 14px;
			line-height: 80px;
		}
		.uploading > .wrap > .info > .left{
			display:flex;
			justify-content:space-between;
			align-items:center;
		}
		.uploading > .wrap > .info > .left .btn{
			margin-right: 20px;
			width: 150px;
			height: 40px;
			color:#fff;
			line-height: 40px;
			text-align:center;
			font-size: 16px;
			cursor: pointer;
		}
		.uploading > .wrap > .info > .left .btn.continue{
			background-color: #ccc;
			transform: scale(1);
			transition:.5s linear;
		}
		.uploading > .wrap > .info > .left .btn.continue:hover{
			text-decoration:underline;
			color:orange;
			transform:scale(1.1);
		}
		.uploading > .wrap > .info > .left .btn.startloading{
			background-color: #60c000;
		}
		.uploading > .wrap > .show{
			box-sizing: border-box;
			min-height: 300px;
			box-shadow: inset 1px 1px 5px;
		}
		.uploading > .wrap > .show > *{
			float:left;
			display: inline-block;
			max-width: 20%;
		}
		.uploading > .wrap > .info > .left > input{
			display: none;
		}
	</style>
</head>
<body>
	<div id="konwledege"><a href="baseKnowledege.html" target="_self">基本知识</a></div>
	<a href="#" id='toTop'>Top</a>
<!-- case1 -->
	<section class="puzzle">
		<h2>拼图游戏</h2>
		<ul>
			<li ><img id='mm' draggable='false;' src="http://www.iyi8.com/uploadfile/2014/1218/20141218105452144.jpg" alt=""></li>
			<li class="box"><div>1</div></li>
			<li class="box"><div>2</div></li>
			<li>
				<nav>
					<p onselectstart='return false;'>恭喜你通关</p>
					<div class='on1'></div>
					<div class='on2'></div>
					<div class='on3'></div>
					<div class='on4'></div>
				</nav>
			</li>
			<li class="box"><div>3</div></li>
			<li class="box"><div>4</div></li>
		</ul>
		<div id="btn">后退一步</div>
	</section>
<!-- case2 -->
	<section class="sort-drag">
		<h2>拖拽排序</h2>
		<div class="wrap">
			<ul>
				<li>
					<p>01</p>
					<p>越过山丘</p>
					<p>杨宗纬</p>
				</li>
				<li>
					<p>02</p>
					<p>如果我爱你</p>
					<p>周冬雨</p>
				</li>
				<li>
					<p>03</p>
					<p>Super Tizzy</p>
					<p>Tizzy</p>
				</li>
				<li>
					<p>04</p>
					<p>不用去猜</p>
					<p>Jony</p>
				</li>
				<li>
					<p>05</p>
					<p>非酋</p>
					<p>薛爱媛</p>
				</li>
				<li>
					<p>06</p>
					<p>清白之年</p>
					<p>王珞丹</p>
				</li>
			</ul>
		</div>
		<img id='cursor-h' src="case/save.png" alt="">
	</section>
<!-- case3 -->
	<section class="collection">
		<h2>回收站</h2>
		<div class="wrap">
			<div></div>
			<img src="case/2.png" alt="" width="100">
			<img src="case/3.png" alt="" width="100">
			<img src="case/4.png" alt="" width="100">
		</div>
	</section>
<!-- case4 -->
	<section class="uploading">
		<h2>图片拖拽上传</h2>
		<div class="wrap">
			<div class="up">请将图片拖拽至此区域</div>
			<div class="info">
				<span>已经选中<i>0</i>张图片,共<i>0</i>KB</span>
				<div class="left">
					<input type="file" id='upup' >
					<label for="upup"><div class="btn continue" id='upup'>继续上传</div></label>
					<div class="btn startloading">开始上传</div>
				</div>
			</div>	
			<div class="show">
			
			</div>


		</div>
	</section>
<!-- script -->
	<script>
	// case1
		(function () {
			var oPics = document.querySelectorAll('.puzzle > ul > li >nav > div'),
				length = oPics.length,
				oNav = document.querySelector('.puzzle > ul > li >nav');
			var oBoxs = document.querySelectorAll('.puzzle > ul > li.box');
			mm.draggable = false;
			var frag = null;
			var indexFlag;
			for(var i=0;i<length;i++ ){
				oPics[i].draggable = true;
				oPics[i].index = i;
				
				oPics[i].style.zIndex = ~~(Math.random()*10+2);
				oPics[i].flag = true;
				oPics[i].ondragstart = function(e){
					e = e || window.event;
					e.dataTransfer.setData('pic', this.index);
				};
				oPics[i].ondragend = function(){
					if(this.flag){
						this.flag = false;
						frag = this;
						frag.className = 'on'+ (this.index+1);
					}
				};

				oBoxs[i].querySelector('div').style.backgroundColor = randomColor();
				oBoxs[i].flag = true;
				oBoxs[i].index = i;
				oBoxs[i].onselectstart = function(e){
					e = e || window.evnet;
					e.preventDefault();
				};
				oBoxs[i].ondragenter = function(){
					this.style.backgroundColor = 'rgba(255,255,100,.5)';
									};
				oBoxs[i].ondragover = function(e){
					e = e || window.event;
					e.preventDefault();
					this.style.backgroundColor = 'rgba(255,100,100,.5)';
				};
				oBoxs[i].ondragleave = function(){
					this.style.backgroundColor = 'transparent';
				};
				oBoxs[i].ondrop = function(){
					indexFlag = this.index;
					if(this.flag){
						var self = this;
						this.flag = false;
						setTimeout(function(){
							self.appendChild(frag);
						},200);	
					}else {
						alert('不能再次移入!请后退或重启');
					}
				};
			}

			function randomColor(){
				return '#'+(~~(Math.random()*0xffffff)).toString(16);
			}	

			btn.onclick = function(){
				console.log(frag);
				oNav.appendChild(frag);
				oBoxs[indexFlag].flag = true;
				oBoxs[indexFlag].style.backgroundColor = 'transparent';
			};
		})();
	//case2
		(function(){
			var oLi = document.querySelectorAll('.sort-drag > .wrap > ul > li'),
				length = oLi.length,
				oCursor = document.getElementById('cursor-h'),
				arr = [],
				move = null,
				target = null;

			for (var i = 0; i < length; i++) {
				oLi[i].style.backgroundColor = randColor();
				oLi[i].draggable = true;

				arr.push(oLi[i]);
				oLi[i].ondragstart = function(e){
					e.dataTransfer.setData('sum', this.index);
					e.dataTransfer.setDragImage(oCursor, '50px', '50px');
					e.dataTransfer.effectAllowed = 'link';
					this.index = arr.indexOf(this);
					move = this;
				};

				oLi[i].ondragover = function(e){
					e = e || window.event;
					e.preventDefault();
					e.dataTransfer.setDragImage(oCursor, '50px', '50px');
					this.style.border = '2px solid #0ff';				
				};
				oLi[i].ondragleave = function(){
					this.style.border = '';
				};

				oLi[i].ondrop = function(){
					this.index = arr.indexOf(this);
					target = this;
					arr.splice(move.index,1,target);
					arr.splice(target.index,1,move);

					for (var i = 0; i < length; i++) {
						arr[i].style.border = '';
						this.parentNode.appendChild(arr[i]);
					}
				};
			}
			function randColor(){
				return '#' + (~~(Math.random()*0xffffff)).toString(16);
			}
		})();
	//case3	
		(function(){
			var oBox = document.querySelector('.collection > .wrap > div'),
				oIcons = document.querySelectorAll('.collection > .wrap > img'),
				length = oIcons.length;
			var wrap = document.querySelector('.collection > .wrap');
			var arr = [];

			wrap.ondragover = function(e){
				e = e || window.event;
				e.preventDefault();
				e.dataTransfer.effectAllowed = 'link';
				this.ondrag = function(e = window.event){
						e.dataTransfer.effectAllowed = 'move';	//why 改变移动的鼠标样式
					};
			};
			wrap.ondrop = function(e){
				e = e || window.evnet;
				e.preventDefault();
			};
			oBox.ondragover = function(e){
				e = e || window.event;
				e.preventDefault();
				this.style.opacity = '0.8';

				this.ondragleave = function(){
					this.style.opacity = '1';
				};
				this.ondrop = function(e){
					e = e || window.event;
					e.preventDefault();
					this.style.opacity = '1';
					this.className = 'on';
					setTimeout(function(){
						wrap.removeChild(arr[0]);
					}, 13);
				};
			};

			for (var i = 0; i < length; i++) {
				var a = ~~(Math.random()*800+50) + 'px';
				var b = ~~(Math.random()*400+50) + 'px';

				oIcons[i].style.top = b;
				oIcons[i].style.left = a;				
				oIcons[i].ondragstart = function(e){
					e = e || window.event;
					// e.preventDefault();
					e.dataTransfer.setData('icons', 'icon');
					e.dataTransfer.effectAllowed = 'link';
					// e.dataTransfer.setDragImage(this, '10px', '10px');	//修改鼠标样式?为啥不行
					var x = e.clientX;
					var y = e.clientY;
					arr.splice(0, arr.length);
					this.ondrag = function(e){
						e = e || window.event;
						// e.dataTransfer.setDragImage(this, '10px', '10px');	//修改鼠标样式?为啥不行
						e.dataTransfer.effectAllowed = 'link';
					};
					this.ondragend = function(e){
						e = e || window.event;
						e.preventDefault();
						var _x = e.clientX - x + this.offsetLeft;
						var _y = e.clientY - y + this.offsetTop;
						this.style.cssText += 'top:'+_y+'px;left:'+_x+'px;';
						arr.push(this);
					};
				};
			}
		})();
	//case4	
		(function(){
			var toUp = document.querySelector('.uploading > .wrap > .up'),
				oShow = document.querySelector('.uploading > .wrap > .show'),
				oI = document.querySelectorAll('.uploading > .wrap > .info > span > i'),
				upup = document.getElementById('upup'),
				size = 0,
				index = 0;
			
			/*
				input控件
			 */
			 upup.onchange = function(){
			 	readFile(this,oShow,oI);
			 	return false;
			 };

			toUp.ondragover = function(e){
				e = e || window.evnet;
				e.preventDefault();
				e.dataTransfer.setData('up', '0');
				e.dataTransfer.effectAllowed = 'copyMove';
				this.innerText = '请释放鼠标';

				this.ondragleave = function(e){
					e = e || window.event;
					this.innerText = '请将图片拖拽至此区域';
				};

				this.ondrop = function(e){
					e = e || window.event;
					e.preventDefault();
					readFile(e.dataTransfer,oShow,oI);
				};
			};
			/**
			 * [readFile 数据源]
			 * @param  {file} info 获取数据的对象
			 * @param  {dom} box  添加图片区域
			 * @param  {dom} oI  显示信息
			 * @return {[type]}      [description]
			 */
			function readFile(info,box,oI){
				var file = info.files[0];
				console.log(file);
				if(!/image\/\w+/.test(file.type)){
					alert('请保持正确的图片类型!');
					return false;
				}

				size += ((file.size/1024)>>0);
				index ++;

				oI[0].innerText = index;
				oI[1].innerText = size;

				var rs = new FileReader();
				rs.readAsDataURL(file);
				rs.onload = function(){
					var oImg = new Image();
					oImg.src = this.result;
					box.appendChild(oImg);
				};
			}
		})();
	</script>
</body>
</html>